<template>
 <div class="main">
  <h6>{{ $t('convert.buy.title2') }}</h6>

  <el-table :data="list" height="250">
   <el-table-column prop="time" :label="$t('convert.buy.t1')" align="center"></el-table-column>
   <el-table-column prop="finalCoinCode" :label="$t('convert.buy.t2')" align="center"></el-table-column>
   <el-table-column prop="payBalance" :label="$t('convert.buy.t3')" align="center"></el-table-column>
   <el-table-column prop="finalBalance" :label="$t('convert.buy.t4')" align="center"></el-table-column>
  </el-table>

  <pagination :total="total" :pageSize="ruleForm.cmp.pageSize" @pageTotal="pageTotal" :count="5" @pageNum="pageNum" :margin="20"></pagination>
 </div>
</template>

<script>
import pagination from '@/components/Pagination/Pagination'

export default {
 name: "History",
 data: () => ({
  list: [],
  total: 0,
  ruleForm: {
   cmp: {
    pageSize: 10,
    pageIndex: 1
   },
   data: ''
  }
 }),
 components: {
  pagination
 },
 created() {
  this.tabList()
 },
 methods: {

  // 获取历史记录
  tabList() {
   this.$post(this.$address.coinsHistory, this.ruleForm).then(res =>{
    if (res.code === 1) {
     this.list = res.data
     if (this.ruleForm.cmp.pageIndex === 1) {
      this.total = Math.ceil(res.total / this.ruleForm.cmp.pageSize)
     }
    }
   })
  },

  // 切换页面条数
  pageTotal(e) {
   this.ruleForm.pageSize = e;
   this.ruleForm.pageIndex = 1;
   this.tabList()
  },
  // 跳转
  pageNum(e) {
   this.ruleForm.pageIndex = e;
   this.tabList()
  },

 }
}
</script>

<style scoped lang="scss">
.main {
 padding-bottom: 20px !important;
 justify-content: center;
 align-content: center;
 >h6 {
  padding-bottom: 20px;
  text-align: left;
  font-size: 20px;
  color: #040404;
 }

 .el-table {
  flex: 1 1 auto;
  height: 1%;
 }
}
</style>
